<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度查看救援队弹窗
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass">
    <div class="Rescue_team_Popup">
      <div class="close_box">
        <img src="@/assets/images/close_btn2.png" v-if="theme == 'dark'" @click="close" />
        <img src="@/assets/images/b_close_btn2.png" v-else @click="close" />
        <!-- <img src="../../assets/images/close_btn2.png" /> -->
      </div>
      <div>
        <div class="input_box" style="margin-top:0;">
          <div class="input_label">场所名称</div>
          <div class="input_bj">
            <input type="text" v-model="detail.siteName" disabled="true" />
          </div>
        </div>
        <div class="input_box">
          <div class="input_label" style="margin-right:49px;">级别</div>
          <div class="input_bj">
            <input type="text" v-model="detail.level" disabled="true" />
          </div>
        </div>
        <div class="input_box">
          <div class="input_label">场所地址</div>
          <div class="input_bj">
            <input type="text" v-model="detail.address" disabled="true" />
          </div>
        </div>
        <div class="input_box">
          <div class="input_label">场所面积</div>
          <div class="input_bj">
            <input type="text" v-model="detail.area" disabled="true" />
          </div>
        </div>
        <div class="input_box">
          <div class="input_label">容纳人数</div>
          <div class="input_bj">
            <input type="text" v-model="detail.capacity" disabled="true" />
          </div>
        </div>
        <!-- <div class="input_box">
          <div class="input_label">联系电话</div>
          <div class="input_bj">
            <input type="text" v-model="detail.phone" />
          </div>
        </div> -->
        <!-- 物资储备数量 -->
        <div>
          <div class="material_title">物资储备数量</div>
          <div class="material_box_bj">
            <div class="container">
              <table cellspacing="0">
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>数量</th>
                    <th>单位主要用途</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in suppliesList" :key="index">
                    <td>{{ item.suppliesName }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.utility }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="input_box" style="margin-top:24px;">
          <div class="input_label" style="color: #FF9140;">已调度人数</div>
          <div class="input_bj2">
            <input type="text" style="color: #FF9140;" v-model="scheduleCount" disabled="true" />
          </div>
        </div>
        <!-- 已调度物资 -->
        <div>
          <div class="material_title" style="color:#FF9040;">已调度物资</div>
          <div class="Scheduled_materials">
            <div class="container">
              <table cellspacing="0">
                <thead style="color:#8e552e;">
                  <tr>
                    <th>名称</th>
                    <th>型号规格</th>
                    <th>数量</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in list1" :key="index">
                    <td>{{ item.reserveName }}</td>
                    <td>{{ item.specification }}</td>
                    <td>{{ item.scheduleCount }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getSettlementPointDetail, getAffectedPointDetails } from '@/api/index'
export default {
  props: {
    attr: {
      type: Object,
      require: true
    }
  },
  watch: {
    attr: {
      handler (newval, oldval) {
        console.log(newval)
        // this.getDetail()
        this.getdetail()
      },
      deep: true
    }
  },
  data () {
    return {
      list1: [],
      detail: {},
      scheduleCount: '',
      popObj: {}
    }
  },
  mounted () {
    this.popObj = JSON.parse(localStorage.getItem('szdObj'))
    console.log(this.attr)
    getAffectedPointDetails({ id: this.popObj.id }).then(res => {
      if (res.code === 200) {
        console.log(res.result)
        if (res.result.suppliesList) {
          res.result.suppliesList.forEach(item => {
            if (item.suppliesReserveList) {
              this.list1 = item.suppliesReserveList.map(items => {
                return {
                  ...items
                }
              })
            }
          })
        }
        // this.list1 = res.result.suppliesReserveList
        this.scheduleCount = res.result.scheduleCount
      }
    })
    this.getdetail()
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  methods: {
    close () {
      this.$emit('closePop')
    },
    getdetail () {
      getSettlementPointDetail({ id: this.attr.id }).then(res => {
        if (res.code === 200) {
          this.detail = res.result
          this.suppliesList = res.result.suppliesList
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.Rescue_team_Popup {
  width: 350px;
  height: 830px;
  // background-image: url('../../assets/images/ranks_detail_bj.png');
  background-size: 100% 100%;
  position: absolute;
  top: -132px;
  right: 0;
  box-sizing: border-box;
  // padding-left: 40px;
  z-index: 1000000000000000000;
  @include themify($themes) {
    background-image: themed('ranks_detail_bj');
  }
}
.close_box {
  box-sizing: border-box;
  padding: 10px;
  text-align: right;
}
.input_box {
  width: 100%;
  height: 30px;
  display: flex;
  margin-top: 15px;
}
.input_label {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  // color: #57a7c7;
  line-height: 26px;
  // opacity: 0.5;
  margin-left: 16px;
  margin-right: 14px;
  @include themify($themes) {
    color: themed('input_label');
  }
}
.input_bj {
  width: 210px;
  height: 30px;
  // background-image: url('../../assets/images/input_bj1.png');
  background-size: 210px 30px;
  @include themify($themes) {
    background-image: themed('input_bj1');
  }
}
.input_bj2 {
  width: 210px;
  height: 30px;
  // background-image: url('../../assets/images/input_bj2.png');
  background-size: 210px 30px;
  @include themify($themes) {
    background-image: themed('input_bj2');
  }
}
.input_bj input,
.input_bj2 input {
  background: none;
  border: none;
  outline: none;
  margin-left: 10px;
  margin-top: 5px;
  line-height: 23px;
  @include themify($themes) {
    color: themed('input_color');
  }
}
.material_title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  // color: #57a7c7;
  line-height: 24px;
  margin-top: 16px;
  @include themify($themes) {
    color: themed('input_label');
  }
  // opacity: 0.5;
}
.material_box_bj {
  width: 310px;
  height: 180px;
  // background-image: url('../../assets/images/wzbj.png');
  // background-size:310px 180px;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  margin-top: 10px;
  @include themify($themes) {
    background-image: themed('wzbj');
  }
}
.Scheduled_materials {
  width: 310px;
  height: 180px;
  // background-image: url('../../assets/images/tab_bj2.png');
  // background-size:310px 180px;
  background-size: cover;
  margin: 0 auto;
  position: relative;
  margin-top: 10px;
  @include themify($themes) {
    background-image: themed('tab_bj2');
  }
}
.container {
  width: 96%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // margin-left:7px;
  // background-color: #2C3A5B;
}

.container table {
  // color: #e6e6e6;
  font-size: 14px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  @include themify($themes) {
    color: themed('table_color_h');
  }
}

.conatiner table thead,
tbody,
tr,
th,
td {
  display: inline-block;
}

.container table thead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  @include themify($themes) {
    color: themed('table_font_thead');
  }
}

.container table thead tr {
  width: 100%;
  // border-bottom: 1px solid #CCC;
  box-sizing: border-box;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(1) {
  width: 100px;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(2) {
  width: 100px;
}

.Rescue_team_Popup .container table thead tr th:nth-of-type(3) {
  width: auto;
}

.Rescue_team_Popup .container table tbody {
  width: 100%;
  max-height: 132px;
  overflow-y: auto;
}
// 滚动条整体部分
.Rescue_team_Popup .container table tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.material_box_bj .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  // background: #d8eef8;
  @include themify($themes) {
    background: themed('d_hk_bj');
  }
  // background: rgba(216, 216, 216, 1);
}
//滚动条的轨道
.material_box_bj .container table tbody::-webkit-scrollbar-track {
  // background: #415c7b;
  // background: rgba(216, 216, 216, 0.6);
  @include themify($themes) {
    background: themed('d_gd_bj');
  }
}
//滚动条的轨道
.Scheduled_materials .container table tbody::-webkit-scrollbar-track {
  // background: #514037;
  // background: rgba(216, 216, 216, 0.6);
  @include themify($themes) {
    background: themed('s_gd_bj');
  }
}
//滚动条里面的滑块
.Scheduled_materials .container table tbody::-webkit-scrollbar-thumb {
  height: 20px;
  // background: #d7b199;
  // background: rgba(216, 216, 216, 1);
  @include themify($themes) {
    background: themed('s_hk_bj');
  }
}
.container table tbody tr {
  width: 100%;
  line-height: 40px;
  // border-bottom: 1px solid #CCCCCC;
  box-sizing: border-box;
}

.container table tbody tr:nth-last-of-type(1) {
  border-bottom: none;
}

.container table tbody tr td {
  text-align: center;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(1) {
  width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(2) {
  width: 100px;
}

.Rescue_team_Popup .container table tbody tr td:nth-of-type(3) {
  width: auto;
}
</style>
